<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/zepto.fullpage.css">
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/h5.animations.css">
</head>
<body>
    <div id="audio_btn" class="off video_exist rotate" style="display: block;">
        <audio loop="" src="" id="media" autoplay="" preload=""></audio>
    </div>
    <div class="wp">
        <div class="wp-inner">

            <div class="page page1">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="txt1">春节渐近，儿时那期盼过<br/>年的心情你是否还记得？</li>
                        <li id="img1"><img style="-webkit-transform: rotateZ(17deg);transform: rotateZ(17deg);" src="../img/filbert1.png" alt=""></li>
                        <li id="img2"><img style="-webkit-transform: rotateZ(192deg);transform: rotateZ(192deg);" src="../img/filbert2.png" alt=""></li>
                        <li id="img3"><img src="../img/img-1.png" alt=""></li>
                    </ul>
                </div>
            </div>

            <div class="page page2">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="txt2"><div style="-webkit-transform: rotateZ(337deg);transform: rotateZ(337deg);">拜拜，加班狗！</div></li>
                        <li id="txt3"><div style="-webkit-transform: rotateZ(17deg);transform: rotateZ(17deg);">咻~~</div></li>
                        <li id="img4"><img src="../img/img-2.png" alt=""></li>
                        <li id="img5"><img src="../img/icon-shake.png" alt=""></li>
                        <li id="txt4"><div>摇一摇 穿越时光机</div></li>
                        <li id="img6"><img src="../img/line.png" alt=""></li>
                    </ul>
                </div>
            </div>

            <div class="page page3">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="txt5">点击右上角“…”分享获取新年礼物</li>
                        <li id="txt6">我的春节记忆是</li>
                        <li id="txt7">爆米花</li>
                        <li id="img7"><img src="../img/bg-cloud.png" alt=""></li>
                        <li id="img8"><img src="../img/memories/爆米花.png" alt=""></li>
                    </ul>
                </div>
            </div>

            <div class="page page4">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="txt8">流量优惠券</li>
                        <li id="txt9">还有一份礼物等待您打开！</li>
                        <li id="box1" class="box">
                            <h4>邀请码：hd1303</h4>
                            <div class="img-box">
                                <img src="../img/demo-qrcode.jpg" class="qrcode">
                            </div>
                            <ul>
                                <li>1- 长按二维码，关注“8流量员工宝”</li>
                                <li>2- 点击菜单栏“VIP充值-进入企业中心”</li>
                                <li>3- 验证方式中选择“邀请码”</li>
                                <li>4- 输入邀请码，即可完成验证注册</li>
                                <li>5- 可为多个号码充值， 长期享有充值折扣</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="page page4">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="txt8">流量优惠券</li>
                        <li id="txt9">还有一份礼物等待您打开！</li>
                        <li id="box1">
                            <h4>邀请码：hd1303</h4>
                            <div class="img-box">
                                <img src="../img/img-hb.png" class="hb">
                            </div>
                            <ul>
                                <li>1- 长按二维码，关注“8流量员工宝”</li>
                                <li>2- 点击菜单栏“VIP充值-进入企业中心”</li>
                                <li>3- 验证方式中选择“邀请码”</li>
                                <li>4- 输入邀请码，即可完成验证注册</li>
                                <li>5- 可为多个号码充值， 长期享有充值折扣</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="page page5">
                <div class="main">
                    <ul class="detail-area">
                        <li id="logo"><img src="../img/logo-fire.png" alt=""></li>
                        <li id="box2"></li>
                        <li id="txt10">来看看孩子们的春节心愿<br/>顺便给他们派个红包吧~</li>
                        <li id="txt11">红包派发成功，还有一份神秘礼物哦~</li>
                        <li id="imgs">
                            <img src="../img/img-hb.png">
                            <img src="../img/img-hb.png">
                            <img src="../img/img-hb.png">
                        </li>
                        <li id="btnFire"><a href="http://www.huodui.org">点击查看孩子们的心愿</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <span class="start"><b></b></span>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.fullpage.js"></script>
    <script src="../js/h5.shake.js"></script>
    <script>
        var noShake = false;
        $('#audio_btn').click(function(){
            var a = $(this).find('audio')[0];
            if ($(this).hasClass('rotate')) {
                $(this).removeClass('rotate')
                a.pause();
            } else {
                $(this).addClass('rotate')
                a.play();
            }
        });

        $('.wp-inner').fullpage({
            page: '.page',
            start: 0,
            duration: 500,
            drag: true,
            loop: false,
            dir: 'v', // v|h
            change: function (e) {
                if (e.cur == 1) {
                    bindShake();
                    $.fn.fullpage.stop();
                } else {
                    unBindShake();
                }
            },
            beforeChange: function (e) {
                if(e.next == 1) {
                    $('#img4').css({
                        '-webkit-animation': 'twisterInDown 2s ease .5s 1 both',
                        'animation': 'twisterInDown 2s ease .5s 1 both'
                    })
                    $('#txt3').css({
                        '-webkit-animation': 'bounceInRight 2s ease 1.5s 1 both',
                        'animation': 'bounceInRight 2s ease 1.5s 1 both'
                    })
                    $('#img5').css({
                        '-webkit-animation': 'fadeInDown 2s ease .5s 1 both',
                        'animation': 'fadeInDown 2s ease .5s 1 both'
                    })
                } else if (e.next == 2) {
                    getRandomMemory();
                } else if ($('.page').eq(e.next).hasClass('page5')) {
                    $('#btnFire').css({
                        '-webkit-animation': 'zoomIn 2s ease 0.8s 1 both',
                        'animation': 'zoomIn 2s ease 0.8s 1 both'
                    })
                }
            },
            afterChange: function (e) {
                if(e.cur == 1) {
                    setTimeout(function(){
                        $('#img4').css({
                            '-webkit-animation': 'tada 2s ease 0s infinite both',
                            'animation': 'tada 2s ease 0s infinite both'
                        })
                        $('#txt3').css({
                            '-webkit-animation': 'tada 2s ease 0s infinite both',
                            'animation': 'tada 2s ease 0s infinite both'
                        })
                        $('#img5').css({
                            '-webkit-animation': 'swing 2s ease 0s infinite both',
                            'animation': 'swing 2s ease 0s infinite both'
                        })
                    }, 2000)
                }
                if ($('.page').eq(e.cur).hasClass('page5')) {
                    $('.start').hide();
                    setTimeout(function(){
                        $('#btnFire').css({
                            '-webkit-animation': 'rubberBand 1s ease 0.5s 1 both',
                            'animation': 'rubberBand 1s ease 0.5s 1 both'
                        })
                    }, 2000)
                } else {
                    if (e.cur == 1) {
                        $('.start').hide();
                    } else {
                        $('.start').show();
                    }
                }
            },
            orientationchange: function (e) {}
        });
        
        /**
         * 随机生成一种童年的记忆文字和图片
         */
        function getRandomMemory() {
            var arr = ['爆米花','比成绩','吃福气饺子','吃糖葫芦','春运堵车','打牌出老千','打雪仗','大扫除','惦记穿新衣','放鞭炮','集市套圈','看春晚','粮票换年货','抢红包','上交压岁钱','走亲戚'];
            var r = Math.ceil(Math.random()*16);
            $('#txt7').text(arr[r - 1]);
            $('#img8 img').attr('src', '../img/memories/' + r + '.png')
        }

        function shakeAction() {
            if (noShake == true) {
                return;
            } else {
                noShake = true;
            }
            setTimeout(function(){
                $.fn.fullpage.moveNext(true);
                $.fn.fullpage.start();
                $('.start').show();
                noShake = false;
            }, 1000);
        }
    </script>
</body>
</html>